<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    select{
      width: 80px;
      height: 100px;
    }
    .btns{
      display: inline-block;
    }
    input{
      display: block;
      width: 40px;
      margin-top: 5px;
    }
  </style>
</head>
<body>
  <select name="" id="" multiple>
    <option value="">添加</option>
    <option value="">删除</option>
    <option value="">修改</option>
    <option value="">查询</option>
  </select>
  <div class="btns">
    <input type="button" value=">" class="add">
    <input type="button" value=">>" class="add_all">
    <input type="button" value="<" class="remove">
    <input type="button" value="<<" class="remove_all">
  </div>
  <select name="" id="" multiple class="last"></select>
  <script>
    var add = document.querySelector('.add');
    var select1 = document.querySelector('select:nth-child(1)');
    var select2 = document.querySelector('.last');
    //单项添加
    add.onclick = function(){
      var ary = [];
      for(var i = 0; i < select1.children.length; i++){
        if(select1.children[i].selected){
          ary.push(select1.children[i]);
          select1.children[i].selected = false;
        }
      }
      for(var j = 0; j < ary.length; j++){
          select2.appendChild(ary[j]);
      }
    }
    //全部添加
    var add_all = document.querySelector('.add_all');
    add_all.onclick = function(){
      var ary = [];
      for(var i = 0; i < select1.children.length; i++){
       ary.push(select1.children[i]);
      }
      for(var j = 0; j < ary.length; j++){
        select2.appendChild(ary[j]);
      }
    }
  </script>
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    select{
      width: 80px;
      height: 100px;
    }
    .btns{
      display: inline-block;
    }
    input{
      display: block;
      width: 40px;
      margin-top: 5px;
    }
  
  </style>
</head>
<body>
  <select name="" id="" multiple>
    <option value="">添加</option>
    <option value="">删除</option>
    <option value="">修改</option>
    <option value="">查询</option>
  </select>
  <div class="btns">
    <input type="button" value=">" class="add">
    <input type="button" value=">>" class="add_all">
    <input type="button" value="<" class="remove">
    <input type="button" value="<<" class="remove_all">
  </div>
  <select name="" id="" class="last" multiple></select>
  <script>
    //select1框 单选功能
    var add = document.querySelector('.add');
    var select1 = document.querySelector('select:nth-child(1)');
    var select2 = document.querySelector('.last');
    add.onclick = function(){
      var option_list = select1.children;
      var ary = [];
      for(var i = 0; i < option_list.length; i++){
        if(option_list[i].selected){
          ary.push(option_list[i]);
          option_list[i].selected = false;
        }
      }
      for(var i = 0; i < ary.length; i++){
        select2.appendChild(ary[i]);
      }
    }
    //select1框 全选功能
    var add_all = document.querySelector('.add_all');
    add_all.onclick = function(){
      var option_list = select1.children;
      var ary = [];
      for(var i = 0; i < option_list.length; i++){
        ary.push(option_list[i]);
      }
      for(var i = 0; i < ary.length; i++){
        select2.appendChild(ary[i])
      }
    }
    //select2框 单选功能
    var remove = document.querySelector('.remove');
    remove.onclick = function(){
      var ary = [];
      var option_list = select2.children;
      for(var i = 0; i < option_list.length; i++){
        if(option_list[i].selected){
          ary.push(option_list[i]);
          option_list[i].selected = false;
        }
      }
      for(var i = 0; i < ary.length; i++){
        select1.appendChild(ary[i]);
      }
    }
    //select2框 全选功能
    var remove_all = document.querySelector('.remove_all');
    remove_all.onclick = function(){
      var option_list = select2.children;
      var ary = [];
      for(var i = 0; i < option_list.length; i++){
        ary.push(option_list[i]);
      }
      for(var i = 0; i < ary.length; i++){
        select1.appendChild(ary[i]);
      }
    }
  </script>
</body>
</html>